<template>
  <div class="app-container">
      <el-row style="left: 90%;">
        <el-button type="primary" @click="back" round size="small">返回</el-button>
      </el-row>
      <el-descriptions title="用例信息" :contentStyle="CS" :label-style="LS " :column="3" style="align-self: center;" >
        <el-descriptions-item label="用例id">{{caseDaoDetailInfo.caseId}}</el-descriptions-item>
        <el-descriptions-item label="用例名称">{{caseDaoDetailInfo.caseName}}</el-descriptions-item>
        <el-descriptions-item label="接口名称">{{caseDaoDetailInfo.interfaceName}}</el-descriptions-item>
        <el-descriptions-item label="参数类型">{{caseDaoDetailInfo.parameterType}}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{caseDaoDetailInfo.requsetMethod}}</el-descriptions-item>
        <el-descriptions-item label="请求路径">{{caseDaoDetailInfo.requestPath}}</el-descriptions-item>
        <el-descriptions-item label="ip地址">{{caseDaoDetailInfo.ip}}</el-descriptions-item>
        <el-descriptions-item label="端口">{{caseDaoDetailInfo.port}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{caseDaoDetailInfo.createTime}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{caseDaoDetailInfo.remark}}</el-descriptions-item>
      </el-descriptions>
    <!--    断言列表 -->
    <div>
      <el-descriptions title="断言列表">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="BeforeAssertionList"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="automaticId" label="ID" width="50"  align="center">
        </el-table-column>
        <el-table-column prop="assertionName" label="断言名称" :show-overflow-tooltip='true' width="200"  align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="update(row.automaticId)">{{ row.assertionName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="assertionObject" label="断言对象" :show-overflow-tooltip='true' width="100"  align="center">
        </el-table-column>
        <el-table-column prop="extractExpression" label="提取键" :show-overflow-tooltip='true' width="100"  align="center">
        </el-table-column>
        <el-table-column prop="continueExtraction" label="是否继续提取" width="150"  align="center">
        </el-table-column>
         <el-table-column prop="automaticIndex" label="继续提取" width="80"  align="center">
         </el-table-column>
         <el-table-column prop="assertMethods" label="断言方法" width="100"  align="center">
         </el-table-column>
         <el-table-column prop="assertValue" label="断言值" width="100"  align="center">
         </el-table-column>
         <el-table-column prop="assertEnable" label="状态" width="100"  align="center">
         </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="100" :show-overflow-tooltip='true'  align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="100" :show-overflow-tooltip='true'  align="center">
        </el-table-column>
        <el-table-column prop="assertRemark" label="备注" min-width="100" :show-overflow-tooltip='true'  align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" >
          <template slot-scope="scope">
            <el-button @click="deleteOne(scope.row.automaticId)" type="text" size="small">删除</el-button>
            <el-button @click="update(scope.row.automaticId)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

      <el-row style="left: 90%;">
        <el-button type="success" @click="dialogFormAddVisible=true" round size="small">新增</el-button>
      </el-row>

    <!-- 数据库操作列表 -->
    <div>
      <el-descriptions title="数据库操作">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="listDatabase"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="databaseId" label="ID" :show-overflow-tooltip='true' width="50"  align="center">
        </el-table-column>
        <el-table-column prop="databaseName" label="操作名称" :show-overflow-tooltip='true' width="200"  align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="updateDatabase(row.databaseId)">{{ row.databaseName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="connectionId" label="配置信息ID" :show-overflow-tooltip='true' width="100"  align="center">
        </el-table-column>
        <el-table-column prop="databaseSql" label="SQL" :show-overflow-tooltip='true' min-width="150"  align="center">
        </el-table-column>
        <el-table-column prop="sqlType" label="操作类型" width="150"  align="center">
        </el-table-column>
         <el-table-column prop="sqlReturn" label="sql的返回结果集" :show-overflow-tooltip='true' min-width="150"  align="center">
         </el-table-column>
         <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip='true' width="100"  align="center">
         </el-table-column>
         <el-table-column prop="updateTime" label="修改时间"  :show-overflow-tooltip='true' width="100"  align="center">
         </el-table-column>
        <el-table-column prop="databaseState" label="是否启用"  :show-overflow-tooltip='true' width="100"  align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="200"  align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="deleteDatabase(scope.row.databaseId)" type="text" size="small">删除</el-button>
            <el-button @click="updateDatabase(scope.row.databaseId)" type="text" size="small">编辑</el-button>
            <el-button @click="testDatabase(scope.row.databaseId)" type="text" size="small">测试</el-button>
            <el-button @click="stateUpdate(scope.row.databaseId)" type="text" size="small">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row style="left: 90%;">
        <el-button type="success" @click="dialogFormAddDatabase=true" round size="small">新增</el-button>
    </el-row>
    <!-- 新增数据库操作 -->
    <el-dialog title="新增：" :visible.sync="dialogFormAddDatabase">
      <el-form :model="databaseConnectionAdd">
        <el-form-item label="操作名称:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionAdd.databaseName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="数据库配置:" :label-width="formLabelWidth">
          <el-select v-model="databaseConnectionAdd.connectionId" filterable placeholder="请选择">
            <el-option v-for="item in connectionIdList" :key="item.connectionName" :label="item.connectionName" :value="item.connectionId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="SQL命令:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionAdd.databaseSql" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="操作类型:" :label-width="formLabelWidth">
          <el-select v-model="databaseConnectionAdd.sqlType" filterable placeholder="请选择">
            <el-option v-for="item in listDatabaseType" :key="item.databaseConnectionMsg" :label="item.databaseConnectionMsg" :value="item.databaseConnectionType">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionAdd.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAddDatabase = false">取 消</el-button>
        <el-button type="primary" @click="addConnectionConfiguration()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改数据库操作 -->
    <el-dialog title="编辑:" :visible.sync="dialogFormAddDatabaseupdate">
      <el-form :model="databaseConnectionUpdate">
        <el-form-item label="操作名称:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionUpdate.databaseName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="数据库配置:" :label-width="formLabelWidth">
          <el-select v-model="databaseConnectionUpdate.connectionId" filterable placeholder="请选择">
            <el-option v-for="item in connectionIdList" :key="item.connectionName" :label="item.connectionName" :value="item.connectionId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="SQL命令:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionUpdate.databaseSql" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="操作类型:" :label-width="formLabelWidth">
          <el-select v-model="databaseConnectionUpdate.sqlType" filterable placeholder="请选择">
            <el-option v-for="item in listDatabaseType" :key="item.databaseConnectionMsg" :label="item.databaseConnectionMsg" :value="item.databaseConnectionType">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="databaseConnectionUpdate.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAddDatabaseupdate = false">取 消</el-button>
        <el-button type="primary" @click="updateDatabaseConnect()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 参数新增页面 -->
    <el-dialog title="新增:" :visible.sync="dialogFormAddVisible">
      <el-form :model="beforeAssertionFrom">
        <el-form-item label="断言名称:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionFrom.assertionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="断言对象:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionFrom.assertionObject" filterable placeholder="请选择">
            <el-option v-for="item in ObjectList" :key="item.id" :label="item.typespreading" :value="item.typespreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提取键:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionFrom.extractExpression" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="继续提取:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionFrom.continueExtraction" filterable placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.id" :label="item.typename" :value="item.typespreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="继续提取第几参数:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionFrom.automaticIndex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="断言方法:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionFrom.assertMethods" filterable placeholder="请选择">
            <el-option v-for="item in beforeAssertionType" :key="item.methodsType" :label="item.msg" :value="item.methodsType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="断言值:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionFrom.assertValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionFrom.assertEnable" filterable placeholder="请选择">
            <el-option v-for="item in spreadingList" :key="item.id" :label="item.name" :value="item.spreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionFrom.assertRemark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="BeforeAssertionAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑:" :visible.sync="dialogFormUpdateVisible">
      <el-form :model="beforeAssertionUpdate">
        <el-form-item label="断言名称:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionUpdate.assertionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="断言对象:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionUpdate.assertionObject" filterable placeholder="请选择">
            <el-option v-for="item in ObjectList" :key="item.id" :label="item.typespreading" :value="item.typespreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提取键:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionUpdate.extractExpression" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="继续提取:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionUpdate.continueExtraction" filterable placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.id" :label="item.typename" :value="item.typespreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="继续提取第几参数:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionUpdate.automaticIndex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="断言方法:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionUpdate.assertMethods" filterable placeholder="请选择">
            <el-option v-for="item in beforeAssertionType" :key="item.methodsType" :label="item.msg" :value="item.methodsType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="断言值:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionUpdate.assertValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用:" :label-width="formLabelWidth">
          <el-select v-model="beforeAssertionUpdate.assertEnable" filterable placeholder="请选择">
            <el-option v-for="item in spreadingList" :key="item.id" :label="item.name" :value="item.spreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="beforeAssertionUpdate.assertRemark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTrue()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 测试嵌套 -->
    <el-drawer
      title="SQL执行"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      >
      <div class="demo-drawer__content">
        <el-form :model="sqlMessage">
          <el-form-item label="返回信息" :label-width="formLabelWidth">
            <el-input v-model="sqlMessage.msg" autocomplete="off" readonly="true"></el-input>
          </el-form-item>

          <el-form-item label="执行信息" :label-width="formLabelWidth" >
            <el-input v-model="sqlMessage.result" autocomplete="off" type="textarea" readonly="true" :rows="10"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import BackToTop from '@/components/BackToTop'
  import waves from '@/directive/waves'
  import {getCaseDetail,getBeforeAssertionListAxios,getBeforeAssertionTypeAxios,beforeAssertionAddPost,beforeAssertionAddDelete,beforeAssertionAddUpdate,beforeAssertionAddUpdateTrue,getDatabaseConnectList,getDatabaseConnectType,connectionConfigurationAllListGet,addConnectionConfigurationPost,connectionConfigurationPut,getDatabaseDetailAxios,deleteDatabaseAxios,stateUpdateAxios,testDatabaseAxios} from '@/api/automation/beforeAssertion'
  export default {
    name:"BeforeAssertion",
    directives: { waves },
    components: { BackToTop },
    data(){
      return{
        myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
        },
        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all',
        },
        tableKey:0,
        listLoading: true,
        caseDaoDetailInfo:{},
        BeforeAssertionList:[],
        dialogFormAddVisible:false,
        dialogFormUpdateVisible:false,
        beforeAssertionFrom:{},
        formLabelWidth: '120px',
        typeList: [{
            "id": 1,
            "typespreading": 0,
            "typename": "不继续提取"
          },
          {
            "id": 2,
            "typespreading": 1,
            "typename": "继续提取"
          }
        ],
        ObjectList: [{
            "id": 1,
            "typespreading": "Response JSON",
            "typename": "Response JSON"
          }
        ],
        spreadingList: [{
            "id": 1,
            "spreading": 0,
            "name": "启用"
          },
          {
            "id": 2,
            "spreading": 1,
            "name": "不启用"
          }
        ],
        beforeAssertionType:[],
        beforeAssertionUpdate:{},
        listDatabase:[],
        listDatabaseType:[],
        databaseConnectionAdd:{},
        dialogFormAddDatabase:false,
        connectionIdList:[],
        dialogFormAddDatabaseupdate:false,
        databaseConnectionUpdate:[],
        sqlMessage:"",
        dialog: false

      }
    },
    methods:{
      //获取用户信息
      getUser() {
        var json = localStorage.getItem("user");
        this.user = JSON.parse(json);
      },
      //获取测试用例基础信息
      getcaseDaoDetailInfo(){
        var caseId = localStorage.getItem("caseBeforeAssertionId");
        getCaseDetail(caseId).then(resp=>{
            this.caseDaoDetailInfo = resp.data;
        })
      },
      //获取该测试用例下的断言
      getBeforeAssertionList(){
        var caseId = localStorage.getItem("caseBeforeAssertionId");
        getBeforeAssertionListAxios(caseId).then(resp=>{
            this.BeforeAssertionList=resp.data;
            if(this.BeforeAssertionList.length>0){
              for(var i=0;i<this.BeforeAssertionList.length;i++){
                if(this.BeforeAssertionList[i].assertEnable==0){
                  this.BeforeAssertionList[i].assertEnable="启用";
                }else{
                  this.BeforeAssertionList[i].assertEnable="不启用";
                }
                if(this.BeforeAssertionList[i].continueExtraction==0){
                  this.BeforeAssertionList[i].continueExtraction="不继续提取";
                }else{
                  this.BeforeAssertionList[i].continueExtraction="继续提取";
                }
              }
            }
        })
      },
      //获取断言方法
      getBeforeAssertionType(){
        getBeforeAssertionTypeAxios().then(resp=>{
            this.beforeAssertionType=resp.data;
        })
      },
      //新增断言
      BeforeAssertionAdd(){
        var caseId = localStorage.getItem("caseBeforeAssertionId");
        this.beforeAssertionFrom.caseId=caseId;
        beforeAssertionAddPost(this.beforeAssertionFrom).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.dialogFormAddVisible=false;
            this.getBeforeAssertionList();
        })
      },
      //删除断言
      deleteOne(automaticId){
        beforeAssertionAddDelete(automaticId).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
             this.getBeforeAssertionList();
        })
      },
      //编辑断言
      update(automaticId){
        this.beforeAssertionUpdat={};
        beforeAssertionAddUpdate(automaticId).then(resp=>{
            this.beforeAssertionUpdate=resp.data;
            this.dialogFormUpdateVisible=true;
        })
      },
      updateTrue(){
        beforeAssertionAddUpdateTrue(this.beforeAssertionUpdate).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.dialogFormUpdateVisible=false;
            this.getBeforeAssertionList();
        })
      },
      back() {
        this.$router.push('/automation/case');
      },
      // 获取数据库操作列表
      listDatabaseConnect(){
        var caseId = localStorage.getItem("caseBeforeAssertionId");
        getDatabaseConnectList(caseId).then(resp=>{
            this.listDatabase=resp.data;
            if(this.listDatabase.length>0){
              for(var i=0;i<this.listDatabase.length;i++){
                if(this.listDatabase[i].databaseState==0){
                  this.listDatabase[i].databaseState="禁用"
                }else{
                  this.listDatabase[i].databaseState="启用"
                }
              }
            }
        })
      },
      //获取数据库连接类型
      beforeAssertionMethodType(){
        getDatabaseConnectType().then(resp=>{
            this.listDatabaseType=resp.data;
        })
      },
      //获取所有数据库连接配置信息
      connectionConfigurationAllList(){
        connectionConfigurationAllListGet().then(resp=>{
            this.connectionIdList=resp.data;
        })
      },
      //新增数据库SQL操作
      addConnectionConfiguration(){
        var caseId = localStorage.getItem("caseBeforeAssertionId");
        this.databaseConnectionAdd.caseId=caseId;
        addConnectionConfigurationPost(this.databaseConnectionAdd).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.dialogFormAddDatabase=false;
            this.listDatabaseConnect();
        })
      },
      //修改数据库SQL操作
      updateDatabaseConnect(){
        connectionConfigurationPut(this.databaseConnectionUpdate).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.dialogFormAddDatabaseupdate=false;
            this.listDatabaseConnect();
        })
      },
      //获取数据库详情
      getDatabaseDetail(databaseId){
        getDatabaseDetailAxios(databaseId).then(resp=>{
            this.databaseConnectionUpdate=resp.data;
        })
      },
      updateDatabase(databaseId){
        this.getDatabaseDetail(databaseId);
        this.dialogFormAddDatabaseupdate=true;
      },
      //删除数据库操作
      deleteDatabase(databaseId){
        deleteDatabaseAxios(databaseId).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.listDatabaseConnect();
        })
      },
      //数据库操作启用/关闭
      stateUpdate(databaseId){
        stateUpdateAxios(databaseId).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.listDatabaseConnect();
        })
      },
      //数据量操作测试
      testDatabase(databaseId){
        testDatabaseAxios(databaseId).then(resp=>{
              this.sqlMessage=resp.data;
              this.dialog=true;
        })
      },
      handleClose(done) {
          done();
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }
    },
    created() {
      // this.getUser();
      this.listLoading = true
      this.getcaseDaoDetailInfo();
      this.getBeforeAssertionList();
      this.getBeforeAssertionType();
      this.listDatabaseConnect();
      this.beforeAssertionMethodType();
      this.connectionConfigurationAllList();
      setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
    }
  }

</script>

<style>

</style>
